<template>
  <div>
    <common-head title="商品详情"></common-head>
    <div class="wrap" v-if="detail.basicInfo">
      <van-swipe class="swiper1">
        <van-swipe-item v-for="banner in detail.pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <h4>
        {{ detail.basicInfo.name }}
      </h4>
      <div class="content" v-html="content"></div>
    </div>
    <!-- 商品弹出层 -->
    <van-popup
      position="bottom"
      round
      closeable
      :style="{ height: '40%' }"
      v-model="show">
        <div class="content-card">
          <van-card
            :num="sku.num"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
          >
            <template #footer>
              <van-stepper v-model="sku.num" />
            </template>
          </van-card>
          <van-button @click="confirm" color="#f66" round size="large">确定</van-button>
        </div>
      </van-popup>
    <!-- /商品弹出层 -->
    <!-- 商品行动栏 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="首页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车"
        :badge="$store.state.cart.items.length||''" />
      <van-goods-action-button
        @click="showPop(1)"
        type="warning" text="加入购物车" />
      <van-goods-action-button
        @click="showPop(2)"
        type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品行动栏 -->
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { fetchItemDetail } from '@api'
import addCart from '@/mixins/addCart'
export default {
  mixins: [addCart],
  data () {
    return {
      detail: {},
      content: '',
      show: false,
      sku: {
        num: 1,
        checked: true
      },
      index: -1

    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    confirm () {
      // 点击商品规格确定按钮
      if (this.index === 1) {
        this._addCart(this.sku)
      } else {
        alert('立即购买')
      }

      this.show = false
    },
    showPop (n) {
      // 显示商品弹出层
      this.show = true
      this.index = n
    },
    fetchDetail () {
      fetchItemDetail(this.$route.params.itemId).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          this.content = res.data.data.content.replace(/<img/g, '<img style="display:block;width:100%"')
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  },
  components: {
    CommonHead
  }
}

</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  margin-bottom: 50px;
  .swiper1{
    img{
      width: 100%;
    }
  }
  /* .content{
    /deep/ img{
      vertical-align: bottom;
      width: 100%;
    }
  } */
}
.content-card{
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    padding: 10px;
    padding-top: 30px;
    box-sizing: border-box;
  }
</style>
